<template>
  <div class="bcontent2_2_2">
    <div class="bcontent2">
      <div class="bcontent2_1"><div class="bcontent2_1_1"><span>最近搜索</span></div><i class="iconfont icon-shanchu"></i></div>
      <div class="bcontent2_2"></div>
      <div class="bcontent2_3"></div>
      <div class="bcontent2_6"><div class="bcontent2_6_1"><span>最近搜索</span></div></div>
      <div class="bcontent2_4">
        <div class="bcontent2_4_1">
          <a href="#">Gucci</a>
          <a href="javascript:;" @click="weiyi()">卫衣</a>
          <a href="#">YSL</a>
          <a href="#">Topshop</a>
          <a href="#">Adidas Originals</a>
          <a href="#">毛衣</a>
          <a href="#">Acne Studios</a>
          <a href="#">Jimmy Choo</a>
          <a href="#">大衣</a>
          <a href="#">Chloe</a>
          <a href="#">fenty puma</a>
          <a href="#">Mac</a>
          <a href="#">Maxmara</a>
          <a href="#">Nars</a>
          <a href="#">短靴</a>
          <a href="#">Marin</a>
          <a href="#">口红</a>
          <a href="#">Fendi</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
      mounted:function () {
        if(localStorage.length==0) {
          $(".bcontent2_1").css({display: "none"});
          $(".bcontent2_2").css({display: "none"});
          $(".bcontent2_3").css({display: "none"});
        }else{
          $(".bcontent2_1").css({display: "block"});
          $(".bcontent2_2").css({display: "block"});
          $(".bcontent2_3").css({display: "block"});
          for(var i=1;i<localStorage.length;i++){
            $(".bcontent2_2").append("<p style='float: left;padding-right:0.2rem'>"+localStorage.getItem(localStorage.key(i))+"</p>");
          }
        }
        $(".bcontent2_1").find("i").click(function () {
          $(".bcontent2_1").css({display:"none"});
          $(".bcontent2_2").css({display:"none"});
          $(".bcontent2_3").css({display:"none"});
          localStorage.clear();
        })
      },
      methods:{
        weiyi(){
            this.$router.push("/shoparticle");
        }
      }
    }
</script>

<style scoped lang="scss">
  .bcontent2_2_2{
    flex:1;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .bcontent2_1{
    width:90%;
    height:0.25rem;
    margin:0.4rem auto 0;
  }
  .bcontent2_1_1{
    width:0.7rem;
    height:0.25rem;
    margin:0 auto;
  }
  .bcontent2_1 span{
    width:100%;
    height:100%;
    font-size:0.14rem;
    background: black;
    color:white;
    text-align: center;
    float: left;
    line-height: 0.25rem;
  }
  .bcontent2_1 i{
    font-size: 0.2rem;
    float: right;
  }
  .bcontent2_2{
    width:80%;
    height:0.2rem;
    margin:0.2rem auto;
  }
  .bcontent2_2 p{
    float:left;
    font-size:0.14rem;
    padding-right:0.2rem;
  }
  .bcontent2_3{
    width:2.2rem;
    height:1px;
    border-bottom: 1px solid #dddddd;
    margin:0 auto;
  }
  .bcontent2_4 a{
    color:#666;
    font-size:0.16rem;
    display: block;
    margin:0 auto 0.2rem;
    text-align: center;
  }
  .bcontent2_6{
    @extend .bcontent2_1
  }
  .bcontent2_6_1{
    @extend .bcontent2_1_1
  }
  .bcontent2_6 span{
    width:100%;
    height:100%;
    font-size:0.14rem;
    background: black;
    color:white;
    text-align: center;
    float: left;
    line-height: 0.25rem;
  }
</style>
